<template>
  <div class="Dropdown">
    <h1>This is an Dropdown page</h1>
    <a-dropdown :trigger="['click']">
      <a
        class="ant-dropdown-link"
        @click="e => e.preventDefault()"
      >
        Click me
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item key="0">
          <a href="http://www.alipay.com/">1st menu item</a>
        </a-menu-item>
        <a-menu-item key="1">
          <a href="http://www.taobao.com/">2nd menu item</a>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3">
          3rd menu item
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <h3>传入的菜单里有多个层级。</h3>
    <a-dropdown>
      <a
        class="ant-dropdown-link"
        @click="e => e.preventDefault()"
      >
        Cascading menu
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item>1st menu item</a-menu-item>
        <a-menu-item>2nd menu item</a-menu-item>
        <a-sub-menu
          key="test"
          title="sub menu"
        >
          <a-menu-item>3rd menu item</a-menu-item>
          <a-menu-item>4th menu item</a-menu-item>
        </a-sub-menu>
        <a-sub-menu
          title="disabled sub menu"
          disabled
        >
          <a-menu-item>5d menu item</a-menu-item>
          <a-menu-item>6th menu item</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-dropdown>
  </div>
</template>
